<template>
  <div class="loginContainerBox">
    <!-- 背景放置 -->
    <div class="bg"></div>
    <!-- 标题放置 -->
    <div class="title"></div>
    <component :is="currentComponent"></component>

    <div class="toggle" @click="changeLogin">点击切换</div>





  </div>
</template>

<script>
//引入三种登录状态
import CommonLogin from "../../components/login/commonLogin.vue"
import SmsLogin from '../../components/login/smsLogin.vue'
import QrLogin from '../../components/login/qrLogin.vue'
// 表单验证思路 当前组件loginForm变化，同步到父组件loginForm
// 抽离验证函数？？？

export default {
  data() {
    return {
      currentComponent: 'commonLogin',//动态绑定组件的状态,默认为常规登录
      loginForm: {
        username: '',
        password: '',
        captcha: ''
      },
    };
  },
  methods: {
    changeLogin() {
      switch (this.currentComponent) {
        case 'commonLogin':
          this.currentComponent = 'smsLogin'
          break;
        case 'smsLogin':
          this.currentComponent = 'commonLogin'
      }
    },
  },
  components: {
    CommonLogin,
    SmsLogin,
    QrLogin
  }
}
</script>

<style lang="less" scoped>
/* 外层阴影部分 */
.loginContainerBox {
  position: fixed;
  z-index: 1;
  left: 240px;
  top: 120px;
  width: 500px;
  background-color: rgba(85, 69, 75, 0.3);
  overflow: hidden;
}
</style>